<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <helloSon 
    :propSon1="num1" 
    :propSon2="num2" 
    @faChangeData="changedata">
        <template v-slot:num1>
          <!-- 该具名插槽中获取到传到本组件的参数值 -->
          <!-- 以具名插槽的方式传递给本组件的子组件中显示 -->
          {{ $route.query.tagnum1 }}
        </template>
        <template v-slot:num2>
          {{ $route.query.tagnum2 }}
        </template>
    </helloSon><br>
-------------------<br>
    <router-link to="/HelloWorld/hellochildren" tag="button">显示helloword下的子路由</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import helloSon from './helloword/helloSon'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'prpos 单向数据，修改之后将值传回父组件保持统一',
      num1:1,
      num2:2
    }
  },
  methods:{
    changedata(sonData,target){
      if(target==1){
        this.num1=sonData;
      }else{
        this.num2=sonData;
      }
    }
  },
  components:{
    helloSon
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
